<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>考试成绩</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/tea/teaes' }">考试</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/tea/teacontent/' + testid }">{{testname}}</el-breadcrumb-item>
      <el-breadcrumb-item>ID:{{hid}}</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 作业列表 -->
      <!-- border加边框 -->
      <!-- stripe隔行变色 -->

      <el-table
        :data="homeworklist"
        style="width: 100%"
        :header-cell-style="{background:'#E6EAF3',color:'#0D1113'}"
        class="toptable"
      >
        <el-table-column label="考试ID" prop="id"></el-table-column>
        <el-table-column label="出题者" prop="author"></el-table-column>
        <el-table-column label="答题者" prop="person"></el-table-column>
        <el-table-column label="答题时间" prop="time"></el-table-column>
        <el-table-column label="得分" prop="score" align="center"></el-table-column>
      </el-table>

      <el-row>
        <el-col :span="10" class="leftcol">
          <div class="singlecol">
            <div class="titlab">
              <span>题目</span>
            </div>
            <div cols="30" rows="10" class="bord">{{form.detail}}</div>
          </div>

          <div class="singlecol">
            <div class="titlab">
              <span>标准答案</span>
            </div>
            <div cols="30" rows="10" v-html="form.standard_ans" contenteditable="true" class="bord"></div>
          </div>

          <div class="singlecol">
            <div class="titlab">
              <span>用户回答</span>
            </div>
            <div cols="30" rows="10" v-html="form.user_ans" contenteditable="true" class="bord"></div>
          </div>

          <!-- <el-form :model="form" label-width="80px" :label-position="labelPosition">
            <el-form-item label="题目">
              <div cols="30" rows="10" class="bord">{{form.detail}}</div>
            </el-form-item>
            

            <el-form-item label="标准答案:">
              <div
                cols="30"
                rows="10"
                v-html="form.standard_ans"
                contenteditable="true"
                class="bord"
              ></div>
            </el-form-item>

            

            <el-form-item label="用户回答:">
              <div cols="30" rows="10" v-html="form.user_ans" contenteditable="true" class="bord"></div>
            </el-form-item>
          </el-form>-->
        </el-col>
        <el-col :span="13" :offset="1">
          <el-table
            :data="keysData"
            style="width: 100%"
            class="tabletwo"
            :header-cell-style="{background:'#E6EAF3',color:'#0D1113'}"
          >
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column label="标准答案关键词" prop="stakey" align="center"></el-table-column>
            <el-table-column label="相似度" width="175px" align="center">
              <template slot-scope="scope">
                <el-slider
                  v-model="scope.row.similarity"
                  :step="100/scope.row.score"
                  show-stops
                  @change="changeScore(scope.$index, scope.row)"
                ></el-slider>
                <span class="per">{{ parseFloat(scope.row.similarity).toFixed(0)}}%</span>
              </template>
            </el-table-column>
            <el-table-column label="用户回答关键词" prop="userKey" align="center"></el-table-column>
            <el-table-column label="得分" prop="uscore" align="center" width="50px"></el-table-column>
          </el-table>

          <div class="rbottom">
            <div>
              <span class="f1">原始得分:</span>
              <span class="f3">{{oldScore}}</span>
            </div>
            <div>
              <span class="f1">当前得分:</span>
              <span class="f2">{{newScore}}</span>
            </div>
          </div>

          <el-button type="primary" class="btn1" @click="QualityClick">确认修改</el-button>
        </el-col>
      </el-row>
    </el-card>

    <QualityDialog :QualityDialogFlag.sync="QualityDialogFlag" @apiTo="changeSim">
      <span slot="content">此操作将修改该得分, 是否继续?</span>
    </QualityDialog>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  components: {
    QualityDialog: () => import('../../../Alert.vue')
  },
  data() {
    return {
      labelPosition: 'left',

      homeworklist: [
        {
          id: '',
          author: '',
          time: '',
          score: null,
          person: ''
        }
      ],
      questionId: 1,
      keyWords: [],
      keyScore: [],
      userKeyScore: [],
      userKeyWords: [],
      userKeySimilarity: [],

      oldScore: null,
      newScore: null,
      dataform: [],

      testname: this.$store.state.homeortestName,
      testid: this.$store.state.homeortestId,

      keysData: [],
      tit: ['题目', '标准答案', '用户回答'],
      form: {
        standard_ans: '',
        user_ans: '',
        detail: ''
      },
      hid: this.$route.params.id,
      uid: null,

      QualityDialogFlag: false
    }
  },
  created() {
    this.getDetail()
    this.getParam()
  },
  methods: {
    logout() {
      window.sessionStorage.clear()
      this.$store.commit('clear')
      this.$router.push('/login')
    },
    // 获取所有的菜单，从后端
    async getDetail() {
      // 取出的data重命名为res
      console.log(this.$route.params.id)

      // post请求出错
      const { data: res } = await this.$http.get(
        `user/answer/getAnswer/${this.$route.params.id}`
      )
      if (res.code !== 200) return this.$message.error('失败！')
      this.form.detail = Object.keys(res.data)[0]

      this.dataform = res.data[this.form.detail]

      this.homeworklist[0].id = this.dataform.id
      this.homeworklist[0].author = this.dataform.teacherName
      // 获取具体名字
      this.uid = this.dataform.userId
      this.getName(this.uid)
      this.homeworklist[0].time = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
        this.dataform.answerTime
      )[0]
      this.homeworklist[0].score = this.dataform.score
      this.oldScore = this.dataform.score
      this.newScore = this.dataform.score

      // 配送要素：装东西、放置、挑东西、分配哈、打包、快递、客服。
      // 装东西,放置,挑东西,分配哈,打包,快递,客服
      // 0,0,0,0,0,0,0

      console.log(res)

      // keysData
      // this.keyWords = this.dataform.keyWords.split(',')
      // this.keyScore = this.dataform.keyScore.split(',')
      // this.userKeyScore = this.dataform.userKeyScore.split(',')
      // this.userKeyWords = this.dataform.userKeyWords.split(',')
      // this.userKeySimilarity = this.dataform.userKeySimilarity.split(',')
      // this.toKeyData(this.keyWords, this.keyScore)

      // form
      this.form.standard_ans = this.dataform.formatAnswer
      this.form.user_ans = this.dataform.myAnswer

      this.form.standard_ans = this.changeColor(
        this.form.standard_ans,
        this.keyWords,
        'red'
      )
      this.form.user_ans = this.changeColor(
        this.form.user_ans,
        this.userKeyWords,
        'blue'
      )
      console.log(this.form.standard_ans, this.form.user_ans)
    },

    // 获取
    async getParam() {
      const { data: res } = await this.$http.post(
        'user/answer/getAnswerParam/' + this.hid
      )
      if (res.code !== 200) return this.$message.error('获取失败')

      this.keyWords = res.data.queKeyWords
      this.keyScore = res.data.queKeyScore
      
      this.userKeyScore = res.data.userKeyScore
      this.userKeyWords = res.data.userKeyWords
      this.userKeySimilarity = res.data.userKeySimilarity
      this.toKeyData(this.keyWords, this.keyScore)

      console.log(this.userKeyScore.length)
      console.log(this.userKeyWords)

      // this.toData(this.keyWords)

      // this.option.series[0].data[0].value = this.userKeySimilarity

      // // this.info[0].num = parseFloat(sum/this.num.length).toFixed(1)  // *100取决于相似度的取值
      // this.per = res.data.prob
      // this.info[0].num = res.data.prob
      // this.info[1].num = parseFloat(res.data.runTime).toFixed(1) + 'ms'
      // // this.info[2].num = parseFloat(this.list.memoryCost).toFixed(1) + 'MB'
      // this.info[2].num = res.data.ram
      // this.info[3].num = res.data.cpu

      // this.rightwords = res.data.rightAnswerYlz
      // this.userwords = res.data.userAnswerYlz

      // console.log(this.homeworklist)
    },

    toKeyData(arr1, arr2) {
      this.keysData = []
      for (var i = 0; i < arr1.length; i++) {
        console.log(i)
        console.log(this.userKeyScore.length)
        if (i < this.userKeyScore.length) {
          this.keysData.push({
            stakey: arr1[i],
            score: parseInt(arr2[i]),
            similarity: parseInt(this.userKeySimilarity[i]),
            userKey: this.userKeyWords[i],
            uscore: parseInt(this.userKeyScore[i])
          })
        } else {
          this.keysData.push({
            stakey: arr1[i],
            score: parseInt(arr2[i]),
            similarity: parseInt(this.userKeySimilarity[i]),
            userKey: '',
            uscore: 0
          })
        }
      }
    },

    // 获取姓名
    async getName(id) {
      const { data: res } = await this.$http.get('user/getUser/' + id)
      if (res.code !== 200) return this.$message.error('获取失败')
      this.homeworklist[0].person = res.data.userName
    },

    //
    changeScore(index, row) {
      row.uscore = (row.score * row.similarity) / 100
      this.newScore = 0
      for (var sc of this.keysData) {
        console.log(sc)
        this.newScore = this.newScore + sc.uscore
        console.log(this.newScore)
      }
    },

    now() {
      this.homeworklist[0].score = this.newScore
      this.oldScore = this.newScore
    },

    //
    changeColor(context, words, color) {
      for (var word of words) {
        //根据关键词新建一个正则，其中g代表全局匹配
        var reg = new RegExp(word, 'g')
        if (reg.test(context)) {
          //将出现的关键词进行高亮处理
          context = context.replace(
            reg,
            // '<span style="color: red">' + word + '</span>'
            "<span style='color: " + color + " '>" + word + '</span>'
          )
          //match()方法与indexOf()类似，只不过match()返回的匹配的字符串的数组，注意:正则需为全局'g'否则只找出现的第一个，如果没有改字符串则返回null
          // var count = context.match(reg).length
          // var obj = new Object()
          // obj.key = word //数据的长度就是改关键词出现的次数
          // obj.value = count
          // countList.push(obj)
        }
      }
      return context
    },

    // 对象数组到字符串
    async changeSim() {
      this.userKeySimilarity = []
      for (var part of this.keysData) {
        this.userKeySimilarity.push(part.similarity)
      }
      const { data: res } = await this.$http.post(
        `user/answer/updateSimilarity/${
          this.hid
        }?similarity=${this.userKeySimilarity.join(',')}`
      )
      if (res.code !== 200) return this.$message.error('修改失败')
      this.$message.success(res.message)
      // this.getDetail()   这是要的，只是用户分数和相似度没联调
      this.now()
    },

    QualityClick() {
      this.QualityDialogFlag = true
    }
  }
}
</script>

<style lang="less" scoped>
.singlecol {
  display: flex;
  width: 100%;
  .titlab {
    text-align: center;
    display: flex;
    align-items: center;
  }
  span {
    white-space: nowrap;
    width: 80px;
    font-weight: bolder;
    display: inline-block;
  }
}

.toptable {
  border: 3px solid #e6eaf3;
}

.decorate {
  height: 22px;
  display: flex;
  .dleft {
    background: #e6eaf3;
    height: 22px;
    width: 80.5px;
  }
  .dright {
    background: white;
    height: 22px;
    width: 344px;
  }
}

.leftcol {
  background: #e6eaf3;
  /deep/ .el-form-item {
    margin-bottom: 0px !important;
    display: flex;
    /*实现垂直居中*/
    align-items: center;
  }
  /deep/ .el-form-item__content {
    background: white;
  }
  /deep/ .el-form-item__label {
    font-weight: bolder !important;
    text-align: center;
    padding-right: 0px !important;
    white-space: nowrap;
  }
}

.bord {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 5px 15px;
  height: auto;
  max-height: 200px;

  min-height: 40px;
  overflow: auto;
  vertical-align: middle;
  background: white;
  font-size: 14px;
  flex: 1;
  letter-spacing: 5px;
}

.btn1 {
  margin-top: 50px;
  margin-right: 20px;
  float: right;
}

.f3 {
  font-size: 20px;
}

.f1 {
  font-weight: 1000;
  margin-right: 35px;
}

.f2 {
  font-weight: 1000;
  font-size: 40px;
}

.rbottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.per {
  margin-left: 7px;
  vertical-align: 13px;
  font-size: 17px;
  // display: inline-block;
}

.tabletwo {
  margin-top: 0px;
  border: 3px solid #e6eaf3;
}

.el-col {
  .el-slider {
    width: 100px;
    display: inline-block;
  }
}

/deep/ .high-row {
  background-image: linear-gradient(
    to top,
    #fdcbf1 0%,
    #fdcbf1 1%,
    #e6dee9 100%
  ) !important;
  color: red;
}

.el-table {
  margin-bottom: 30px;
}

.des {
  height: 100px;
  margin-top: 30px;
  span {
    display: inline-block;
    width: 150px;
    font-size: 25px;
  }
  .num {
    font-weight: 1000;
    font-size: 30px;
  }
  .iconfont {
    font-size: 30px;
  }

  .el-progress {
    vertical-align: -14px;
    margin-left: -25px;
  }

  /deep/ .el-progress-circle {
    width: 50px !important;
    height: 50px !important;
  }
}

.el-menu {
  .el-menu-item {
    text-align: center;
  }
  .el-menu-item.is-active {
    background: #1aad19 !important;
  }
}

.sty {
  // font-weight: bold;
  font-size: 20px;
}

.home-container {
  //   height: 100%;
  width: 80%;
  margin-left: 10%;
  background: #f0f0f2;
}

.el-header {
  background-color: white;
  // margin-left: 10%;
  // width: 80%;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: black;
  font-size: 20px;
  .left {
    display: flex;
    align-items: center;
    margin-left: 10px;
    img {
      width: 5%;
      height: 5%;
    }
    span {
      margin-left: 15px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .el-dropdown {
      span {
        font-size: 15px;
        white-space: nowrap;
      }
    }
  }
}

.el-button {
  margin-left: 50px;
  font-size: 15px;
  // background: white;
  border: none;
}
.el-avatar {
  margin-right: 50px;
}

.el-main {
  background-color: white;
  margin-left: 15px;
  margin-right: 15px;

  // background-image: url("../assets/微信图片_20191012142541.jpg");
  // background-size: 1336px 694.4px;
}

.iconfont {
  margin-right: 30px;
}
</style>